<template>
    <div class="chat-block">
        <!--员工-->
        <div class="staff">
            <div class="title">员工</div>
            <div class="search">
                <el-input placeholder="请输入员工名称" v-model="a_name" suffix-icon="el-icon-search" clearable @change="search('assistant')"></el-input>
            </div>

            <!--员工滚动区域-->
            <div class="staff_block" v-loading="staff_loading">
                <!-- <div class="z_box_staff"> -->
                <mescroll-vue ref="staff_mescroll" :down="staff_mescrollDown" :up="staff_mescrollUp" @init="staff_mescrollInit">
                    <div class="staff_list" v-for="(staff, index) in staff_list" :key="index"
                         @click="getClientList(staff)">
                        <span class="staff_name hight" v-if="staff_userid === staff.userid">
                            {{staff.name}}
                            <div style="margin-top: 10px">
                                <el-tag type="success" v-if="staff.status === 1"
                                        size="mini">在职</el-tag>
                                <el-tag type="info" v-else-if="staff.status === 2"
                                        size="mini">禁用</el-tag>
                                <el-tag type="warning" v-else-if="staff.status === 4"
                                        size="mini">未激活</el-tag>
                                <el-tag type="danger" v-else-if="staff.status === 5"
                                        size="mini">离职</el-tag>

                                <el-tag class="mr-10" type="success"
                                        v-if="staff.huihua_status === 1" size="mini">开启</el-tag>
                                <el-tag class="mr-10" type="danger" size="mini" v-else>未开启</el-tag>
                            </div>
                        </span>
                        <span class="staff_name" v-else>
                            {{staff.name}}
                            <div style="margin-top: 10px">
                                <el-tag type="success" v-if="staff.status === 1"
                                        size="mini">在职</el-tag>
                                <el-tag type="info" v-else-if="staff.status === 2"
                                        size="mini">禁用</el-tag>
                                <el-tag type="warning" v-else-if="staff.status === 4"
                                        size="mini">未激活</el-tag>
                                <el-tag type="danger" v-else-if="staff.status === 5"
                                        size="mini">离职</el-tag>

                                <el-tag class="mr-10" type="success"
                                        v-if="staff.huihua_status === 1" size="mini">开启</el-tag>
                                <el-tag class="mr-10" type="danger" size="mini" v-else>未开启</el-tag>
                            </div>
                        </span>
                    </div>
                </mescroll-vue>
                <!-- </div> -->
            </div>
        </div>

        <!--客户滚动区域-->
        <div class="customer">
            <div class="title">{{staff_name}}的客户</div>
            <div class="customer_block" v-loading="loading">
                <el-tabs v-model="activeCustomerName" @tab-click="handleCustomerClick">
                    <!--客户-->
                    <el-tab-pane label="客户" name="customer">
                        <!--筛选-->
                        <el-input placeholder="请输入客户名称" v-model="c_name" suffix-icon="el-icon-search" clearable @change="search('client')" style="margin-bottom:12px"></el-input>
                        <!--<el-date-picker-->
                        <!--    v-model="c_searchDate"-->
                        <!--    type="daterange"-->
                        <!--    range-separator="-"-->
                        <!--    start-placeholder="开始日期"-->
                        <!--    end-placeholder="结束日期"-->
                        <!--    format="yyyy-MM-dd"-->
                        <!--    value-format="yyyy-MM-dd HH:mm:ss"-->
                        <!--    :default-time="['00:00:00', '23:59:59']"-->
                        <!--    :picker-options="pickerOptions"-->
                        <!--    :editable="false"-->
                        <!--    clearable-->
                        <!--    style="margin-bottom:12px;width:auto;">-->
                        <!--</el-date-picker>-->

                        <el-empty description="暂无数据" v-if="customer_list != undefined && customer_list.length === 0"></el-empty>

                        <div class="z_box" v-else>
                            <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
                                <div class="customer_list" v-for="(customer, index) in customer_list" :key="index"
                                     @click="getCustomerMessage(customer)">
                                    <div class="customer_info">
                                        <div class="customer_avatar"><img
                                            :src="customer.client.avatar" fit="fill"
                                            style="width: 60px;height: 60px;" />
                                        </div>
                                        <div class="customer_name hight"
                                             v-if="activeMsg.client.name === customer.client.name">
                                            {{customer.client.name}}
                                        </div>
                                        <div class="customer_name" v-else>
                                            {{customer.client.name}}
                                        </div>
                                    </div>
                                    <div class="customer_tag">
                                        <el-tag type="success" v-if="customer.is_del === 0"
                                                size="mini">未删除</el-tag>
                                        <el-tag type="info" size="mini" v-else>已删除</el-tag>

                                        <el-tag class="mr-10" type="success"
                                                v-if="customer.loss_type === 0" size="mini">未流失</el-tag>
                                        <el-tag class="mr-10" type="info" size="mini"
                                                v-else>流失</el-tag>

                                        <el-tag class="mr-10" type="success"
                                                v-if="customer.agree === 'agree'"
                                                size="mini">同意</el-tag>
                                        <el-tag class="mr-10" type="info" size="mini"
                                                v-else>不同意</el-tag>

                                        <el-tag class="mr-10" size="mini" v-if="customer.msg_new_time">{{customer.msg_new_time.slice(0, 10)}}</el-tag>

                                        <el-tag class="mr-10" type="danger" size="mini">{{customer.count}}</el-tag>

                                    </div>
                                </div>
                            </mescroll-vue>
                        </div>

                    </el-tab-pane>

                    <!--群聊-->
                    <el-tab-pane label="群聊" name="group">
                        <el-empty description="暂无数据" v-if="group_list != undefined && group_list.length === 0"></el-empty>
                        <div class="z_box" v-else>
                            <mescroll-vue ref="group_mescroll" :down="group_mescrollDown" :up="group_mescrollUp" @init="group_mescrollInit">
                                <!--筛选-->
                                <el-input placeholder="请输入客户名称" v-model="g_name" suffix-icon="el-icon-search" clearable @change="search('group')" style="margin-bottom:12px"></el-input>
                                <!--<el-date-picker-->
                                <!--    v-model="g_searchDate"-->
                                <!--    type="daterange"-->
                                <!--    range-separator="-"-->
                                <!--    start-placeholder="开始日期"-->
                                <!--    end-placeholder="结束日期"-->
                                <!--    format="yyyy-MM-dd"-->
                                <!--    value-format="yyyy-MM-dd HH:mm:ss"-->
                                <!--    :default-time="['00:00:00', '23:59:59']"-->
                                <!--    :picker-options="pickerOptions"-->
                                <!--    :editable="false"-->
                                <!--    clearable-->
                                <!--    style="margin-bottom:12px;width:auto;">-->
                                <!--</el-date-picker>-->

                                <div class="customer_list" v-for="(group, index) in group_list" :key="index" @click="getGroupMessage(group)">
                                    <div v-if="activeMsg.name === group.name || activeMsg.chatid === group.chatid">
                                        <div class="customer_info">
                                            <div class="customer_name hight group_name" v-if="group.name">
                                                {{group.name}}
                                            </div>
                                            <div class="customer_name hight group_name" v-else>
                                                {{group.chatid}}
                                            </div>
                                        </div>
                                        <div class="customer_tag">
                                            <el-tag type="success" v-if="group.is_del === 0"
                                                    size="mini">未删除</el-tag>
                                            <el-tag type="info" size="mini" v-else>已删除</el-tag>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <div class="customer_info">
                                            <div class="customer_name group_name" v-if="group.name">
                                                {{group.name}}
                                            </div>
                                            <div class="customer_name group_name" v-else>
                                                {{group.chatid}}
                                            </div>
                                        </div>
                                        <div class="customer_tag">
                                            <el-tag type="success" v-if="group.is_del === 0"
                                                    size="mini">未删除</el-tag>
                                            <el-tag type="info" size="mini" v-else>已删除</el-tag>
                                        </div>
                                    </div>
                                </div>
                            </mescroll-vue>
                        </div>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </div>

        <!--数据信息-->
        <div class="archive">
            <div class="title">{{activeMsg.name}}</div>
            <div class="search">
                <el-form :inline="true" ref="form" :model="form" style="margin: 10px;">
                    <el-form-item label="" prop="content">
                        <el-input placeholder="请输入聊天内容" v-model="form.content"
                                  size="mini"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search('archive')"
                                   size="mini">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="chat-messages" v-loading="msg_loading">
                <el-empty description="暂无数据" v-if="messageList != undefined && messageList.length === 0"></el-empty>
                <div v-else class="z_message_item">
                    <mescroll-vue ref="msg_mescroll" :down="msg_mescrollDown" :up="msg_mescrollUp" @init="msg_mescrollInit">
                        <div class="message" v-for="(message, index) in messageList"
                             :ref="message.msgid" :key="index" v-if="activeCustomerName === 'customer'">
                            <div class="chat-message user-a" v-if="message.tolist == staff_userid">
                                <p class="message-content" v-if="message.msgtype == 'text'"
                                   v-html="message.content"></p>
                                <p class="message-content" v-if="message.msgtype == 'image'">
                                    <el-image :src="message.content" fit="contain"></el-image>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'video'">
                                    <el-button type="primary" @click="upload(message,index)" size="medium" v-if="message.need_upload === 1">{{ clickedIndex === message.msgid ? '下载中' : '下载' }}</el-button>
                                    <video v-else width="320" height="240" controls>
                                        <source :src="message.content" type="video/mp4">
                                    </video>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'voice'">
                                    <Audio :src="message.content"></Audio>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'emotion'">
                                    <el-image :src="message.content" fit="contain"></el-image>
                                </p>
                                <span class="user-name">{{ message.from_name }}</span>
                                <span class="timestamp">{{ message.msgtime }}</span>
                                <el-button class="view_more" type="primary" @click="viewMore(message)"
                                           size="mini" v-if="isSearch">查看上下文</el-button>
                            </div>
                            <div class="chat-message user-b" v-if="message.from == staff_userid">
                                <p class="message-content" v-if="message.msgtype == 'text'"
                                   v-html="message.content"></p>
                                <p class="message-content" v-if="message.msgtype == 'image'">
                                    <el-image :src="message.content" fit="contain"></el-image>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'video'">
                                    <el-button type="primary" @click="upload(message,index)" size="medium" v-if="message.need_upload === 1">{{ clickedIndex === message.msgid ? '下载中' : '下载' }}</el-button>
                                    <video v-else width="320" height="240" controls>
                                        <source :src="message.content" type="video/mp4">
                                    </video>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'voice'">
                                    <Audio :src="message.content"></Audio>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'emotion'">
                                    <el-image :src="message.content" fit="contain"></el-image>
                                </p>
                                <span class="user-name">{{ message.from_name }}</span>
                                <span class="timestamp">{{ message.msgtime }}</span>
                                <el-button class="view_more" type="primary" @click="viewMore(message)"
                                           size="mini" v-if="isSearch">查看上下文</el-button>
                            </div>
                        </div>
                        <div class="message" v-for="(message, index) in messageList"
                             :ref="message.msgid" :key="index" v-if="activeCustomerName === 'group'">
                            <!--别人发的-->
                            <div class="chat-message user-a" v-if="message.from != staff_userid">
                                <span class="user-name">{{ message.from_name }}</span>
                                <span class="timestamp">{{ message.msgtime }}</span>
                                <p class="message-content" v-if="message.msgtype == 'text'">
                                    {{ message.content }}
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'image'">
                                    <el-image :src="message.content" fit="contain"></el-image>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'video'">
                                    <el-button type="primary" @click="upload(message,index)" size="medium" v-if="message.need_upload === 1">{{ clickedIndex === message.msgid ? '下载中' : '下载' }}</el-button>
                                    <video v-else width="320" height="240" controls>
                                        <source :src="message.content" type="video/mp4">
                                    </video>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'voice'">
                                    <Audio :src="message.content"></Audio>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'emotion'">
                                    <el-image :src="message.content" fit="contain"></el-image>
                                </p>
                                <el-button class="view_more" type="primary" @click="viewMore(message)"
                                           size="mini" v-if="isSearch">查看上下文</el-button>
                            </div>
                            <!--本人发的-->
                            <div class="chat-message user-b" v-if="message.from == staff_userid">
                                <span class="user-name">{{ message.from_name }}</span>
                                <span class="timestamp">{{ message.msgtime }}</span>
                                <p class="message-content" v-if="message.msgtype == 'text'">
                                    {{ message.content }}
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'image'">
                                    <el-image :src="message.content" fit="contain"></el-image>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'video'">
                                    <el-button type="primary" @click="upload(message,index)" size="medium" v-if="message.need_upload === 1">{{ clickedIndex === message.msgid ? '下载中' : '下载' }}</el-button>
                                    <video v-else width="320" height="240" controls>
                                        <source :src="message.content" type="video/mp4">
                                    </video>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'voice'">
                                    <Audio :src="message.content"></Audio>
                                </p>
                                <p class="message-content" v-if="message.msgtype == 'emotion'">
                                    <el-image :src="message.content" fit="contain"></el-image>
                                </p>
                                <el-button class="view_more" type="primary" @click="viewMore(message)"
                                           size="mini" v-if="isSearch">查看上下文</el-button>
                            </div>
                        </div>
                    </mescroll-vue>

                </div>
            </div>
        </div>

        <!--        <div v-if="loading" class="loader"></div>-->
    </div>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue'
import {
    getPermitUserList,
    getCustomerList,
    getMessageList,
    getMediaData,
    getGroupChatList,
    getGroupChatMsg, getActiveMsg, getActiveGroupMsg, upadteHuihua
} from "@/api/scrm/monitor/monitor";
import Audio from "./audio.vue"
export default {
    components: {
        Audio,
        MescrollVue // 注册mescroll组件
    },
    data() {
        return {
            // meScroll-员工
            mescroll: null, // mescroll实例对象
            mescrollDown: {
                callback: this.upCallbackDown, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
            }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: { // 上拉加载的配置.
                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                //以下是一些常用的配置,当然不写也可以的.
                page: {
                    page: 1, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    pageSize: 20 //每页数据条数,默认10
                },
                total: 0, //数据的总数
            },
            customer_list_one: null, //员工信息

            // meScroll-客户
            staff_mescroll: null,
            staff_mescrollDown: {
                callback: this.staff_upCallbackDown,
            },
            staff_mescrollUp: {
                callback: this.staff_upCallback,
                page: {
                    page: 1,
                    pageSize: 20
                },
                total: 0,
            },
            customer_list_two: null, //客户信息

            // meScroll-群聊
            group_mescroll: null,
            group_mescrollDown: {
                callback: this.group_upCallbackDown,
            },
            group_mescrollUp: {
                callback: this.group_upCallback,
                page: {
                    page: 1,
                    pageSize: 20
                },
                total: 0,
            },

            // meScroll-消息
            msg_mescroll: null,
            msg_mescrollDown: {
                callback: this.msg_upCallbackDown
            },
            msg_mescrollUp: {
                callback: this.msg_upCallback,
                page: {
                    page: 1,
                    pageSize: 10
                },
                total: 0,
            },

            ///////
            form: {
                name: '',
                content: ''
            },
            a_name: '',
            a_tab: '',
            c_name: '',
            c_searchDate: [],
            c_tab: '',
            g_name: '',
            g_searchDate: [],
            g_tab: '',
            pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                    if (maxDate && minDate) {
                        console.log('ok', minDate.toLocaleDateString())
                        console.log('ok1', maxDate.toLocaleDateString())

                        const minYear = minDate.getFullYear();
                        const minMonth = (minDate.getMonth() + 1).toString().padStart(2, '0');
                        const minDay = minDate.getDate().toString().padStart(2, '0');
                        const maxYear = maxDate.getFullYear();
                        const maxMonth = (maxDate.getMonth() + 1).toString().padStart(2, '0');
                        const maxDay = maxDate.getDate().toString().padStart(2, '0');
                        this.c_searchDate = [`${minYear}-${minMonth}-${minDay} 00:00:00`, `${maxYear}-${maxMonth}-${maxDay} 23:59:59`]
                        console.log('员工时间搜索', this.c_searchDate)
                        // this.search('client');
                    }
                },
                disabledDate(date){
                    return date.getTime() > Date.now()
                }
            },

            staff_list: [], //员工列表
            staff_name: '', //点击选中的员工姓名
            staff_userid: '', //点击选中的员工ID
            customer_list: [], //某个员工的客户列表
            activeCustomerName: 'customer',
            messageList: [], //聊天记录
            clickedIndex: null,
            group_list: [], //群列表
            activeMsg: [], //选中的客户信息
            isSearch: false, //显示查看上下文，只有在搜索后显示
            loading: false,
            msg_loading: false,
            staff_loading: false,
            page: 1,
            itemsPerPage: 10,
            hasMore: true,
            scroll_type: 'customer',

        }
    },
    created() {

    },
    methods: {
        // 员工mescroll
        staff_mescrollInit(mescroll) {
            this.staff_mescroll = mescroll
        },
        staff_upCallbackDown(mescroll) { //刷新
            console.log("员工刷新");
            this.init(true);
            this.$nextTick(() => {
                mescroll.endSuccess()
            })
        },
        staff_upCallback(page, mescroll) {
            console.log('员工-进入加载更多', this.staff_mescrollUp.page.page);
            let pageNum = this.staff_mescrollUp.total / this.staff_mescrollUp.page.pageSize;
            console.log(pageNum);  //总共能分的页数
            if (this.staff_mescrollUp.page.page >= pageNum) {
                console.log("员工-没有数据了");
                mescroll.endErr()
            } else {
                this.staff_mescrollUp.page.page++;
                this.init(false);  //下拉获取数据
            }
            this.$nextTick(() => {
                // mescroll.endSuccess(arr.length)
                setTimeout(() => {
                    mescroll.endSuccess()
                }, 1000)
            })

        },
        //////////////////////////////

        // 客户mescroll
        mescrollInit(mescroll) {
            this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
        },
        upCallbackDown(mescroll) { //刷新
            console.log("客户刷新");
            this.getClientList(this.customer_list_one);
            this.$nextTick(() => {
                mescroll.endSuccess()
            })
        },
        upCallback(page, mescroll) {
            console.log('客户-进入加载更多', this.mescrollUp.page.page);

            let pagnum = this.mescrollUp.total / this.mescrollUp.page.pageSize;
            console.log(pagnum);  //总共能分的页数
            if (this.mescrollUp.page.page >= pagnum) {
                console.log("客户-没有数据了");
                mescroll.endErr()
            } else {
                this.mescrollUp.page.page++;
                this.getClientList(this.customer_list_one, false);  //下拉获取数据
            }
            this.$nextTick(() => {
                setTimeout(() => {
                    mescroll.endSuccess()
                }, 1000)
            })
        },
        //////////////////////////////

        // 群组mescroll
        group_mescrollInit(mescroll) {
            this.group_mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
        },
        group_upCallbackDown(mescroll) { //刷新
            // console.log("刷新");
            this.getGroupList(this.customer_list_one);
            setTimeout(() => {
                mescroll.endSuccess()
            }, 1000)
        },
        group_upCallback(page, mescroll) {
            console.log('群聊-进入加载更多', this.group_mescrollUp.page.page);
            let pagnum = this.group_mescrollUp.total / this.group_mescrollUp.page.pageSize;
            console.log(pagnum);  //总共能分的页数
            if (this.group_mescrollUp.page.page >= pagnum) {
                console.log("群聊-没有数据了");
                mescroll.endErr()
            } else {
                this.group_mescrollUp.page.page++;
                this.getGroupList(this.customer_list_one, false);  //下拉获取数据
            }
            this.$nextTick(() => {
                // mescroll.endSuccess(arr.length)
                setTimeout(() => {
                    mescroll.endSuccess()
                }, 1000)
            })

        },
        //////////////////////////////

        // 消息mescroll
        msg_mescrollInit(mescroll) {
            this.msg_mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
        },
        msg_upCallbackDown(mescroll) {
            //下拉刷新
            console.log("消息-刷新");
            this.getCustomerMessage(this.customer_list_two);
            this.$nextTick(() => {
                mescroll.endSuccess()
            })
        },
        msg_upCallback(page, mescroll) {
            console.log('消息-进入加载更多', this.msg_mescrollUp.page.page);
            let pagnum = this.msg_mescrollUp.total / this.msg_mescrollUp.page.pageSize;
            console.log(pagnum);  //总共能分的页数
            if (this.msg_mescrollUp.page.page >= pagnum) {
                console.log("消息-没有数据了");
                mescroll.endErr()
            } else {
                this.msg_mescrollUp.page.page++;
                this.getCustomerMessage(this.customer_list_two, false);  //上拉获取数据
            }
            this.$nextTick(() => {
                mescroll.endSuccess()
            })

        },

        // 获取员工列表信息
        init(isRefresh = true) {
            this.staff_loading = true;
            let param = {}
            if (!isRefresh) {
                //加载更多
                param = {
                    name: this.a_name,
                    pageNumber: this.staff_mescrollUp.page.page,
                    pageSize: this.staff_mescrollUp.page.pageSize,
                }
            } else {
                //刷新
                this.staff_mescrollUp.page.page = 1
                this.staff_mescrollUp.page.pageSize = 10
                param = {
                    name: this.a_name,
                    pageNumber: this.staff_mescrollUp.page.page,
                    pageSize: this.staff_mescrollUp.page.pageSize,
                }
            }

            getPermitUserList(param).then((res) => {
                if (res.data.list && res.data.list.length > 0) {
                    if (!isRefresh) {
                        //表示加载更多
                        this.staff_mescrollUp.total = res.data.total
                        this.staff_list = [...this.staff_list, ...res.data.list]
                    } else {
                        //刷新
                        this.staff_list = []
                        this.staff_list = res.data.list
                        this.staff_mescrollUp.total = res.data.total

                        //默认第一个员工的姓名展示
                        const cone = res.data.list[0]
                        this.staff_userid = cone.userid
                        this.staff_name = cone.name
                        //默认第一个员工的客户展示
                        this.customer_list_one = cone
                        //联动员工列表
                        this.getClientList(cone)
                    }
                    this.staff_loading = false;
                }
            });
        },
        search(index) {
            switch (index) {
                case 'assistant':
                    this.init();
                    break;
                case 'client':
                    console.log('搜索客户')
                    this.getClientList(this.customer_list_one);
                    break;
                case 'group':
                    console.log('搜索群组')
                    this.getGroupList(this.customer_list_one);
                    break;
                case 'archive':
                    console.log('搜索消息')
                    if (this.scroll_type == 'customer') {
                        console.log('搜索客户消息')
                        this.getCustomerMessage(this.activeMsg, this.form.content);
                    } else {
                        console.log('搜索群组消息')
                        this.getGroupMessage(this.activeMsg, this.form.content)
                    }
                    this.isSearch = true;
                    break;
            }
        },
        getClientList(data, isRefresh = true) {
            this.staff_userid = data.userid;
            this.staff_name = data.name;
            let param = {}
            if (!isRefresh) {
                //加载更多
                param = {
                    name: this.c_name,
                    time: this.c_searchDate,
                    userid: data.userid,
                    pageNumber: this.mescrollUp.page.page,
                    pageSize: this.mescrollUp.page.pageSize,
                }
            } else {
                //刷新
                this.mescrollUp.page.page = 1
                this.mescrollUp.page.pageSize = 20
                param = {
                    name: this.c_name,
                    time: this.c_searchDate,
                    userid: data.userid,
                    pageNumber: this.mescrollUp.page.page,
                    pageSize: this.mescrollUp.page.pageSize,
                }
            }
            this.loading = true;
            //单聊人员列表
            getCustomerList(param).then((res) => {
                if (res.data.list && res.data.list.length > 0) {
                    if (!isRefresh) {
                        //表示加载更多
                        this.mescrollUp.total = res.data.total
                        this.customer_list = [...this.customer_list, ...res.data.list]
                    } else {
                        //刷新
                        this.customer_list = res.data.list;
                        this.mescrollUp.total = res.data.total
                        //获取第一个人的聊天内容
                        console.log('单聊-获取聊天内容')
                        this.getCustomerMessage(res.data.list[0]);
                    }
                } else {
                    this.messageList = [];
                    this.customer_list = [];
                    this.activeMsg = [];
                }
                this.loading = false;
            });
        },
        getGroupList(data, isRefresh = true) {
            let param = {}
            if (!isRefresh) {
                //加载更多
                param = {
                    name: this.g_name,
                    userid: data.userid,
                    pageNumber: this.group_mescrollUp.page.page,
                    pageSize: this.group_mescrollUp.page.pageSize,
                }
            } else {
                //刷新
                this.group_mescrollUp.page.page = 1
                this.group_mescrollUp.page.pageSize = 20
                param = {
                    name: this.g_name,
                    userid: data.userid,
                    pageNumber: this.group_mescrollUp.page.page,
                    pageSize: this.group_mescrollUp.page.pageSize,
                }
            }
            this.loading = true;
            //群聊列表
            getGroupChatList(param).then((res) => {
                if (res.data.list && res.data.list.length > 0) {
                    if (!isRefresh) {
                        //表示加载更多
                        this.group_mescrollUp.total = res.data.total
                        this.group_list = [...this.group_list, ...res.data.list]
                    } else {
                        //刷新
                        this.group_list = res.data.list;
                        this.group_mescrollUp.total = res.data.total
                        //获取第一个人的聊天内容
                        console.log('群聊-获取聊天内容')
                        this.getCustomerMessage(res.data.list[0]);
                    }
                } else {
                    this.messageList = [];
                    this.group_list = [];
                    this.activeMsg = [];
                }
                this.loading = false;
            })
        },
        initHuihua() {
            upadteHuihua().then((res) => { });
        },
        c_search_date(item) {
            console.log(item)
        },
        //禁用未来日期，限制时间范围为60天
        limitDate(time, currentDate) {
            if (currentDate !== "") {
                const one = 60 * 24 * 3600 * 1000; //设置现在时间范围60天
                const minTime = currentDate - one; //获取当前时间往前30天的时间
                const maxTime = currentDate + one;  //获取当前时间往后30天的时间
                return (
                    //限制时间不能选中当前时间往前的30天， 往后的30天
                    time.getTime() < minTime ||
                    time.getTime() > maxTime ||
                    time.getTime() > Date.now() //设置禁用未来日期
                )
            } else {
                return time.getTime() > Date.now() //设置禁用未来日期
            }
        },
        handleCustomerClick(tab, event) {
            if (tab.name == 'customer') {
                this.scroll_type = 'customer';
            } else {
                this.scroll_type = 'group';
            }
        },
        getCustomerMessage(data, isRefresh=true, keyword='') {
            this.customer_list_two = data
            this.msg_loading = true
            console.log('getCustomerMessage-start', data)
            this.activeMsg = data;
            let param = {
                to_id: data.client_userid,
                from_id: this.staff_userid,
                keyword: keyword,
            }
            if (!isRefresh) {
                // 加载更多
                param.page = this.msg_mescrollUp.page.page
                param.itemsPerPage = this.msg_mescrollUp.page.pageSize
            } else {
                // 刷新
                this.msg_mescrollUp.page.page = 1
                this.msg_mescrollUp.page.pageSize = 10
                param.page = this.msg_mescrollUp.page.page
                param.itemsPerPage = this.msg_mescrollUp.page.pageSize
            }
            // let param = {
            //     "to_id": data.client_userid,
            //     "from_id": this.staff_userid,
            //     "page": this.page,
            //     "itemsPerPage": this.itemsPerPage,
            //     'keyword': keyword
            // }
            console.log('getCustomerMessage-param', param)
            getMessageList(param).then((res) => {
                //判断搜索关键字是否为空，不为空则关键字高亮
                console.log('getCustomerMessage-return', res)
                if (keyword) {
                    this.Highlight(keyword, res.data.list)
                } else {
                    if (!isRefresh) {
                        this.messageList = [...this.messageList, ...res.data.list];
                        this.msg_mescrollUp.total = res.data.total

                    } else {
                        this.messageList = res.data.list;
                        this.msg_mescrollUp.total = res.data.total
                    }
                }
                this.msg_loading = false
            })
        },
        getGroupMessage(data, keyword) {
            this.activeMsg = data;
            this.page = 1;
            let param = {
                "room_id": data.chatid,
                "page": this.page,
                "itemsPerPage": this.itemsPerPage,
                'keyword': keyword
            }
            getGroupChatMsg(param).then((res) => {
                this.messageList = res.data;
                this.page++;
                this.loading = false;
            })
        },
        viewMore(data) {
            if (this.scroll_type == 'customer') {
                let param = {
                    "to_id": data.tolist,
                    "from_id": data.from,
                    "id": data.id
                }
                getActiveMsg(param).then((res) => {
                    console.log(this.form.content)
                    this.messageList = res.data;
                    this.$nextTick(() => {
                        let result = res.data.filter(item => item.msgid == data.msgid);
                        const element = this.$refs[result[0]['msgid']][0];
                        if (element) {
                            this.isSearch = false;
                            element.scrollIntoView({ behavior: 'auto' });
                            this.Highlight(this.form.content, res.data);
                        }
                    });
                })
            } else {
                let param = {
                    "room_id": data.roomid,
                    "id": data.id
                }
                getActiveGroupMsg(param).then((res) => {
                    this.messageList = res.data;
                    this.$nextTick(() => {
                        let result = res.data.filter(item => item.msgid == data.msgid);
                        const element = this.$refs[result[0]['msgid']][0];
                        if (element) {
                            this.isSearch = false;
                            element.scrollIntoView({ behavior: 'auto' });
                        }
                    });
                })
            }
        },
        upload(data, index) {
            let param = {
                "filename": data.content,
                "msgid": data.msgid,
                "msgtype": data.msgtype,
            }
            this.clickedIndex = this.clickedIndex === data.msgid ? null : data.msgid;
            getMediaData(param).then((res) => {
                this.messageList[index].need_upload = 2;
                this.messageList[index].content = res.data;
                this.loading = false;
            })
        },
        Highlight(keyword, data) {
            const arr = data;
            arr.map((item, index) => {
                if (keyword) {
                    let replaceReg = new RegExp(keyword, "ig");
                    let replaceString = `<span style="color: #0066FF">${keyword}</span>`;
                    arr[index].content = item.content.replace(replaceReg, replaceString);
                }
            });
            this.messageList = arr;
        },
    }
}
</script>

<style lang="scss" scoped>
.search {
    padding: 10px;
}
.main-padding {
    height: 60px;
    border: 1px solid #97a8be;
    overflow: hidden;
}
.chat-block {
    width: 99%;
    height: 100%;
    overflow: hidden;
}
.staff,
.customer {
    width: 20%;
    height: 1138px;
    border-right: 1px solid #97a8be;
    float: left;
    .title {
        padding: 10px;
        font-size: 16px;
        color: #000000;
    }
}
.archive {
    width: 59%;
    height: 100%;
    float: left;
    .title {
        padding: 10px;
        font-size: 16px;
        color: #000000;
    }
}
.staff_block {
    height: 1000px;
    overflow-y: scroll;
    position: relative;
    .staff_list {
        margin: 10px 0px;
        cursor: pointer;
    }
}
.customer_block {
    padding: 10px;
    .z_box {
        position: relative;
        height: 900px;
        overflow-y: scroll;
        .z_box_item {
            width: 100%;
            height: 40px;
            color: #fff;
            margin-bottom: 12px;
            background-color: #000000;
        }
        .customer_list {
            margin: 10px;
            cursor: pointer;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid #ccc;
            .customer_avatar {
                float: left;
                margin-right: 10px;
            }
            .customer_name {
                float: left;
                padding: 5px 10px;
                margin-top: 10px;
            }
        }
    }
}
.chat-messages {
    //height: 100%;
    //overflow-y: auto;
    height: 1138px;
    overflow-y: scroll;
    position: relative;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

.z_message_item {
    height: 1000px;
    overflow: hidden;
}
.message {
    padding: 5px 20px;
    //border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 默认左对齐 */
}
.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.user-name {
    //font-weight: bold;
    font-size: 14px;
    color: #222;
    margin-right: 30px;
}

.message-content {
    font-size: 16px;
    margin-left: 10px;
}

.timestamp {
    float: right;
    font-size: 14px;
    color: #222;
}
.chat-message {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    max-width: 60%;
    overflow-wrap: break-word;
}

.user-a {
    background-color: #f2f2f2; /* 灰色背景表示用户A */
    align-self: flex-start; /* 左对齐 */
}

.user-b {
    background-color: #b3e5fc; /* 蓝色背景表示用户B */
    align-self: flex-end; /* 右对齐 */
}
span.staff_name {
    width: 100%;
    display: inline-block;
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
}
span.staff_name:hover {
    color: #fff;
    background-color: #66b1ff;
}
.hight {
    color: #66b1ff;
}
.mr-10 {
    margin-left: 10px;
}
.customer_info {
    width: 100%;
    display: inline-block;
}
.customer_tag {
    width: 100%;
    display: inline-block;
}
.group_name {
    white-space: pre-wrap; /* 或者使用 word-wrap: break-word; */
    overflow-wrap: break-word;
    width: 100%;
}
</style>